<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="./js/jquery-3.5.1.js"></script>
  <script src="./js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="./css/bootstrap.min.css">

  <title>编程二</title>
</head>
<body>

  <style>
    [v-cloak]{
      display: none;
    }
  </style>
  <div id="app" v-cloak>
    
    <table class="table table-bordered table-hover text-center">
      <thead>
        <tr class="text-center">
          <td></td>
          <th class="text-center">书籍名称</th>
          <th class="text-center">出版日期</th>
          <th class="text-center">价格</th>
          <th class="text-center">购买数量</th>
          <th class="text-center">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(items,index) in tableData">
          <td>{{index}}</td>
        <td>{{items.name}}</td>
        <td>{{items.date}}</td>
        <td>￥{{items.price}}</td>
        <td id = "account">
          <input  id = "sub" type="button" value="-" class = "showNode" :disabled="items.account<=1" @click = subAmount(index) >
          <!-- <input type="button" value="-" :class="items.account=1 ? 'showNode':'hideNode' " @click = addAmount(index) > -->
          &nbsp;&nbsp;{{items.account}}&nbsp;&nbsp;
          <input type="button" value="+" @click ="addAmount(index)"></td>
        <td><input type="button" value="移除" @click.prevent = "del(index)"></td>
        </tr>
      </tbody>
    </table>


    <h3>总价格：￥{{allPrice}}</h3>
    
  </div>
  <script>
      new Vue({
        el:"#app",
        data:{
          tableData : [
            {"name":"《java编程思想》","date":"2020-9","price":98.00,"account":1},
            {"name":"《数据分析与数据原理》","date":"2019-2","price":39.00,"account":1},
            {"name":"《Hadoop权威指南》","date":"2019-10","price":59.00,"account":1},
            {"name":"《代码大全》","date":"2018-8","price":128.00,"account":1},
          ],
          // allPrice:0
        },
        methods: {
          addAmount(index){
            this.tableData[index].account ++;
            // this.allPrice += this.tableData[index].price;
            
          },
          subAmount(index){
            if (this.tableData[index].account >1) {
              this.tableData[index].account --;
              // this.allPrice -= this.tableData[index].price;
            }else{
              alert("数量为1，不能再减！")
            }
            
          },
          del(index){
              // console.log(this.tableData[index].price*this.tableData[index].account);
              // this.allPrice -= this.tableData[index].price*this.tableData[index].account;           
              this.tableData.splice(index,1); 
          }
        },
        computed:{
          allPrice(){
           /*  let totalPrice = 0;            
            for (const i in this.tableData) {    
                totalPrice += this.tableData[i].price * this.tableData[i].account;
              console.log(totalPrice);
            }
            return totalPrice; */


            /* let totalPrice = 0;
            for(let i=0;i<this.tableData.length;i++){
              totalPrice += this.tableData[i].price * this.tableData[i].account
            }
            return totalPrice */

            return this.tableData.reduce(function (preValue, tableData) {              
              return preValue + tableData.price * tableData.account
            }, 0)

          }
        }
      })  
    </script>
</body>
</html>